<template>
  <div class="home">
    <van-nav-bar
        title="参保信息"
        left-text=""
        right-text="修改"
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
    />
    <van-cell-group title="基本信息">
      <van-cell title="选择城市" @click="showAddress=true" is-link arrow-direction="down" value="济南" />
      <van-cell title="户口类型" @click="showHukou=true" is-link arrow-direction="down" value="城镇" />
      <van-cell title="公积金规则" @click="showGjj=true" is-link arrow-direction="down" value="城镇" />
      <van-cell title="社保基数" value="3510" />
      <van-cell title="公积金基数" value="1910" />
    </van-cell-group>
    <van-cell-group title="社保与公积金明细">
      <div class="description">
        <p>社保缴费基数：3510-17550</p>
        <p>公积金缴费基数：1910-17550</p>
      </div>
      <div class="jiaofei">
      <table>
        <thead>
        <tr><td>缴纳项目</td><td>缴纳基数</td><td>个人缴纳</td><td>单位缴纳</td></tr>
        </thead>
        <tbody>
        <tr><td>养老</td><td>3510</td><td>280.80(8%)</td><td>631.80(18%)</td></tr>
        <tr><td>医疗</td><td>3510</td><td>70.20(2%)</td><td>315.90(9%)</td></tr>
        <tr><td>失业</td><td>3510</td><td>10.60(0.3%)</td><td>24.60(0.7%)</td></tr>
        <tr><td>工伤</td><td>3510</td><td>0.00(0%)</td><td>9.90(0.28%)</td></tr>
        <tr><td>生育</td><td>3510</td><td>0.00(0%)</td><td>35.10(1%)</td></tr>
        <tr><td>大病医疗</td><td>0</td><td>0.00(0%)</td><td>0(0%)</td></tr>
        <tr><td>公积金</td><td>1910</td><td>96.00(5%)</td><td>96(5%)</td></tr>
        </tbody>
      </table>
      </div>
      <van-cell title="个人社保合计" value="361.60元" />
      <van-cell title="单位社保合计" value="1017.30元" />
    </van-cell-group>
    <!--弹出组件-->
    <van-actionsheet
        v-model="showAddress"
    >
      <van-area :area-list="areaList" @confirm="showAddress=false" @cancel="showAddress=false"/>
    </van-actionsheet>
    <van-actionsheet
        v-model="showHukou"
    >
      <van-picker
          show-toolbar
          title="户口类型"
          :columns="hukouList"
          @cancel="showHukou=false"
          @confirm="showHukou=false"
      />    </van-actionsheet>
    <van-actionsheet
        v-model="showGjj"
    >
      <van-picker
          show-toolbar
          title="公积金规则"
          :columns="gjjList"
          @cancel="showGjj=false"
          @confirm="showGjj=false"
      />    </van-actionsheet>
    <van-button type="info" size="large" @click="goPay">生成订单</van-button>
  </div>
</template>

<script>
import { Cell, CellGroup, NavBar, Button, Actionsheet, Area, Picker } from "vant"
import AreaList from '@/assets/js/area'
export default {
  name: "jiaofei",
  data() {
    return {
      username: '',
      password: '',
      showAddress: false,
      showHukou:false,
      showGjj:false,
      areaList: AreaList,
      hukouList:[
        '城镇',
        '农村'
      ],
      gjjList: [
        '济南5+5',
        '济南4+6'
      ]
    }
  },
  components: {
    "van-cell-group": CellGroup,
    "van-cell": Cell,
    "van-nav-bar": NavBar,
    "van-button": Button,
    "van-actionsheet": Actionsheet,
    "van-picker": Picker,
    "van-area": Area
  },
  methods: {
    goPay() {
      this.$router.push('/pay')
    },
    onClickLeft() {
      this.$router.go(-1)
    },
    onClickRight() {

    }
  }
};
</script>

<style scoped>
  .home{background-color: #FAFAFA;}
  .description{color:#999;padding:10px 20px}
  .jiaofei{color:#666;text-align: center;margin:10px;line-height: 2}
  .jiaofei thead td{font-weight: bold;color:#000}
  .avatar{width:80px;height: 80px;margin:2em auto;}
  .avatar img{width:100%;height: 100%;border-radius: 50%;}
</style>